<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>SkyRTC聊天室Demo</title>
    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            background-color: #f0f0f0;
        }

        #videos {
            position: absolute;
            left: 30%;
            top: 0;
            bottom: 0;
            right: 0;
            overflow: auto;
        }

        #videos video {
            display: inline-block;
            width: 32%;
        }

        #chat {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 30%;
            border: 1px solid #0f0f0f;
        }
        #chat .msgIpt, #chat .fileIpt{
            position: absolute;
            left: 0;
            width: 80%;
        }
        #chat .sendBtn, #chat .sendFileBtn {
            position: absolute;
            left: 80%;
            width: 20%;
        }
        #chat .msgIpt,#chat .sendBtn {
            bottom: 0;
        }
        #chat .fileIpt, #chat .sendFileBtn {
            bottom: 30px;
        }

        #chat .msgs {
            padding: 5%;
        }
        #chat .msgs p{
            margin: 0.3em 0;
        }
        #files {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 20%;
        }
        #files .name {
        }
        #files .percent {
            font-weight: bold;
            text-decoration: none
        }
    </style>
</head>
<body>
<div id="chat">
    <div class="msgs" id="msgs"></div>
    <input type="file" id="fileIpt" class="fileIpt">
    <button id="sendFileBtn" class="sendFileBtn">发送文件</button>
    <input type="text" id="msgIpt" class="msgIpt">
    <button id="sendBtn" class="sendBtn">发送</button>
</div>
<div id="videos">
    <video id="me" autoplay></video>
</div>
<div id="files">
</div>
</body>
<script type="text/javascript" src="/SkyRTC-client.js"></script>
<script type="text/javascript">
    var videos = document.getElementById("videos");
    var sendBtn = document.getElementById("sendBtn");
    var msgs = document.getElementById("msgs");
    var sendFileBtn = document.getElementById("sendFileBtn");
    var files = document.getElementById("files");
    var rtc = SkyRTC();

    /**********************************************************/
    sendBtn.onclick = function(event){
        var msgIpt = document.getElementById("msgIpt"),
            msg = msgIpt.value,
            p = document.createElement("p");
        p.innerText = "me: " + msg;
        //广播消息
        rtc.broadcast(msg);
        msgIpt.value = "";
        msgs.appendChild(p);
    };

    sendFileBtn.onclick = function(event){
        //分享文件
        rtc.shareFile("fileIpt");
    };
    /**********************************************************/



    //对方同意接收文件
    rtc.on("send_file_accepted", function(sendId, socketId, file){
        var p = document.getElementById("sf-" + sendId);
        p.innerText = "对方接收" + file.name + "文件，等待发送";

    });
    //对方拒绝接收文件
    rtc.on("send_file_refused", function(sendId, socketId, file){
        var p = document.getElementById("sf-" + sendId);
        p.innerText = "对方拒绝接收" + file.name + "文件";
    });
    //请求发送文件
    rtc.on('send_file', function(sendId, socketId, file){
        var p = document.createElement("p");
        p.innerText = "请求发送" + file.name + "文件";
        p.id = "sf-" + sendId;
        files.appendChild(p);
    });
    //文件发送成功
    rtc.on('sended_file', function(sendId, socketId, file){
        var p = document.getElementById("sf-" + sendId);
        p.parentNode.removeChild(p);
    });
    //发送文件碎片
    rtc.on('send_file_chunk', function(sendId, socketId, percent, file){
        var p = document.getElementById("sf-" + sendId);
        p.innerText = file.name + "文件正在发送: " + Math.ceil(percent) + "%";
    });
    //接受文件碎片
    rtc.on('receive_file_chunk', function(sendId, socketId, fileName, percent){
        var p = document.getElementById("rf-" + sendId);
        p.innerText = "正在接收" + fileName + "文件：" +  Math.ceil(percent) + "%";
    });
    //接收到文件
    rtc.on('receive_file', function(sendId, socketId, name){
        var p = document.getElementById("rf-" + sendId);
        p.parentNode.removeChild(p);
    });
    //发送文件时出现错误
    rtc.on('send_file_error', function(error){
        console.log(error);
    });
    //接收文件时出现错误
    rtc.on('receive_file_error', function(error){
        console.log(error);
    });
    //接受到文件发送请求
    rtc.on('receive_file_ask', function(sendId, socketId, fileName, fileSize){
        var p;
        if (window.confirm(socketId + "用户想要给你传送" + fileName + "文件，大小" + fileSize + "KB,是否接受？")) {
            rtc.sendFileAccept(sendId);
            p = document.createElement("p");
            p.innerText = "准备接收" + fileName + "文件";
            p.id = "rf-" + sendId;
            files.appendChild(p);
        } else {
            rtc.sendFileRefuse(sendId);
        }
    });
    //成功创建WebSocket连接
    rtc.on("connected", function(socket) {
        //创建本地视频流
        rtc.createStream({
            "video": true,
            "audio": true
        });
    });
    //创建本地视频流成功
    rtc.on("stream_created", function(stream) {
        document.getElementById('me').src = URL.createObjectURL(stream);
        document.getElementById('me').play();
    });
    //创建本地视频流失败
    rtc.on("stream_create_error", function() {
        alert("create stream failed!");
    });
    //接收到其他用户的视频流
    rtc.on('pc_add_stream', function(stream, socketId) {
        var newVideo = document.createElement("video"),
            id = "other-" + socketId;
        newVideo.setAttribute("class", "other");
        newVideo.setAttribute("autoplay", "autoplay");
        newVideo.setAttribute("id", id);
        videos.appendChild(newVideo);
        rtc.attachStream(stream, id);
    });
    //删除其他用户
    rtc.on('remove_peer', function(socketId) {
        var video = document.getElementById('other-' + socketId);
        if(video){
            video.parentNode.removeChild(video);
        }
    });
    //接收到文字信息
    rtc.on('data_channel_message', function(channel, socketId, message){
        var p = document.createElement("p");
        p.innerText = socketId + ": " + message;
        msgs.appendChild(p);
    });
    //连接WebSocket服务器
    rtc.connect("ws:" + window.location.href.substring(window.location.protocol.length).split('#')[0], window.location.hash.slice(1));
</script>
</html>
